<template>
    <div class="lineMap-mes">
        <van-nav-bar
                title="信号图"
                class="header"
                left-text=""
                left-arrow
                @click-left="jumpPage('/')"
        />
        <h3 class="vant-header">信噪比柱状图</h3>
        <!-- {{satelliteData}} -->
        <div id="myChartLine" style="width: 100%;height: 300px"></div>

        <h3 class="vant-header">卫星信号状态</h3>

        <div class="vant-table">
            <table cellspacing="0" style="width:100%" class="table">
                <tr>
                    <th class="th" v-for="(item, index) in option.column" :key="index">{{ item.label }}</th>
                </tr>
                <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
                    <td v-for="(context, i) in option.column" :key="i">{{ item[context.prop] }}</td>
                </tr>
            </table>
        </div>
        <!-- 下部选项条 -->
        <div class="underbox">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="star-o" @click="jumpPage('/star')">星空图</van-tabbar-item>
                <van-tabbar-item icon="bar-chart-o" @click="jumpPage('/linemap')">信号图</van-tabbar-item>
                <van-tabbar-item icon="shrink" @click="jumpPage('/stardata')">俯仰角</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active:1,

                myChartLine:null,
                satellite_name:[],
                satellite_sn1:[],
                satellite_sn2:[],
                satellite_sn3:[],

                satelliteData:"",

                tableData: [
                    {
                        closedAccount: 9,
                        givePrice: 0,
                        noAccount: 1,
                        roomType: "区域卫星",

                    },
                    {
                        closedAccount: 0,
                        givePrice: 8,
                        noAccount: 5,
                        roomType: "全球卫星",

                    },
                    {
                        closedAccount: 3,
                        givePrice: 1,
                        noAccount: 0,
                        roomType: "北斗二号",

                    },
                    {
                        closedAccount: 6,
                        givePrice: 0,
                        noAccount: 1,
                        roomType: "北斗三号",

                    },
                ],
                //th
                option: {
                    column: [
                        {
                            label: '卫星类型',
                            prop: 'roomType'
                        },
                        {
                            label: '可看卫星',
                            prop: 'givePrice'
                        },
                        {
                            label: '可用卫星',
                            prop: 'closedAccount'
                        },
                        {
                            label: '故障卫星',
                            prop: 'noAccount'
                        }
                    ]
                }
            }
        },
        methods: {
            jumpPage(url){
                this.$router.push(
                    {
                        path:url
                    }
                )
            },
            drawLine(){
                var data1 = this.satelliteData;
                // var data1 = [
                //     //type1是区域，2是全球,
                //     //mark1是北斗2,2是北斗3
                //     {sv: 'G3', azi: 294, ele: 23, sn1: 45, sn2: 41, sn3: 0,type:1,mark:1},
                //     {sv: 'G14', azi: 130, ele: 68, sn1: 47, sn2: 41, sn3: 0,type:2,mark:1},
                //     {sv: 'G16', azi: 231, ele: 43, sn1: 47, sn2: 37, sn3: 0,type:1,mark:1},
                //     {sv: 'G22', azi: 268, ele: 28, sn1: 45, sn2: 35, sn3: 0,type:2,mark:1},
                //     {sv: 'G25', azi: 44, ele: 12, sn1: 31, sn2: 0, sn3: 27,type:1,mark:1},
                //     {sv: 'G26', azi: 257, ele: 73, sn1: 52, sn2: 47, sn3: 43,type:2,mark:1},
                //     {sv: 'G29', azi: 66, ele: 30, sn1: 47, sn2: 37, sn3: 0,type:1,mark:1},
                //     {sv: 'G31', azi: 26, ele: 57, sn1: 50, sn2: 42, sn3: 0,type:2,mark:1},
                //     {sv: 'G32', azi: 140, ele: 42, sn1: 48, sn2: 40, sn3: 41,type:1,mark:2},
                //     {sv: 'C1', azi: 143, ele: 47, sn1: 46, sn2: 45, sn3: 46,type:2,mark:2},
                //     {sv: 'C2', azi: 231, ele: 36, sn1: 43, sn2: 45, sn3: 45,type:1,mark:2},
                //     {sv: 'C4', azi: 121, ele: 33, sn1: 42, sn2: 45, sn3: 45,type:2,mark:2},
                //     {sv: 'C5', azi: 251, ele: 15, sn1: 39, sn2: 43, sn3: 43,type:2,mark:2},
                //     {sv: 'C6', azi: 186, ele: 50, sn1: 46, sn2: 45, sn3: 47,type:2,mark:2},
                //     {sv: 'C7', azi: 330, ele: 68, sn1: 49, sn2: 49, sn3: 49,type:2,mark:2},
                //     {sv: 'C9', azi: 233, ele: 67, sn1: 47, sn2: 47, sn3: 48,type:1,mark:2},
                //     {sv: 'C10', azi: 284, ele: 54, sn1: 47, sn2: 45, sn3: 47,type:2,mark:2},
                //     {sv: 'C14', azi: 313, ele: 17, sn1: 43, sn2: 47, sn3: 47,type:1,mark:2},
                //     {sv: 'R1', azi: 202, ele: 44, sn1: 50, sn2: 43, sn3: 0,type:2,mark:2},
                //     {sv: 'R2', azi: 299, ele: 49, sn1: 53, sn2: 49, sn3: 0,type:1,mark:1},
                //     {sv: 'R11', azi: 30, ele: 36, sn1: 51, sn2: 49, sn3: 0,type:2,mark:1},
                //     {sv: 'R12', azi: 316, ele: 47, sn1: 51, sn2: 0, sn3: 0,type:1,mark:1},
                //     {sv: 'R21', azi: 78, ele: 24, sn1: 48, sn2: 48, sn3: 0,type:2,mark:1},
                //     {sv: 'R22', azi: 134, ele: 15, sn1: 48, sn2: 46, sn3: 0,type:1,mark:1}];
                this.satellite_name=[];
                this.satellite_sn1=[];
                this.satellite_sn2=[];
                this.satellite_sn3=[];
                this.myChartLine = this.$echarts.init(document.getElementById('myChartLine'));
                for (var i=0;i<data1.length;i++){
                    // var geometry_x = (90 - data.satellite_state[i].elevation) * Math.sin(Math.PI * data.satellite_state[i].azimuth / 180);
                    // var geometry_y = (90 - data.satellite_state[i].elevation) * Math.cos(Math.PI * data.satellite_state[i].azimuth / 180);
                    this.satellite_name.push(data1[i].sv);
                    this.satellite_sn1.push(data1[i].sn1);
                    this.satellite_sn2.push(data1[i].sn2);
                    this.satellite_sn3.push(data1[i].sn3);

                }
                this.myChartLine.setOption({
                    title: { text: '' },
                    tooltip: {},
                    legend: {
                        data: ['sn1','sn2','sn3'],
                    },
                    xAxis: {
                        data: this.satellite_name
                    },
                    yAxis: {},
                    series: [{
                        name: 'sn1',
                        type: 'bar',
                        data: this.satellite_sn1
                    },{
                        name: 'sn2',
                        type: 'bar',
                        data: this.satellite_sn2
                    },{
                        name: 'sn3',
                        type: 'bar',
                        data: this.satellite_sn3
                    }],
                    animationDuration: 2000
                });

            },
            getAllStarInfo(){
                let res = $App.getGpsSatelliteList();
                this.satelliteData = JSON.parse(res);
                return res;
            },
        },
         mounted() {
            var that = this;
                setTimeout(() => {
                     that.getAllStarInfo();
                     that.drawLine();
            },500);
            // this.drawLine();
        }
    };

</script>

<style scoped>
    .lineMap-mes{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .lineMap-mes .header{
        color: #ffffff;
        background-color: #153744;
    }
    /deep/ .van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        color: #ffffff;
    }

    .lineMap-mes .vant-header{
        margin: 1rem 0.5rem;
        line-height: 2rem;
        font-size: 1rem;
    }

    .underbox {
        display: flex;
        flex-direction: column;
    }
    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        color:  #153744;
        background-color: #fff;
    }


    .vant-table .table{
        text-align: center;
    }
    .vant-table .table .th {
        font-size: 0.8rem;
        line-height: 1.5rem;
        background-color: #173744;
        border-bottom: #ffffff 2px solid;
        color:  #ffffff;
        text-align: center;
    }
    .vant-table .table .list-tr {
        font-size: 0.8rem;
        line-height: 1.6rem;
    }
    .vant-table .table .list-tr:nth-child(2n) {
        background-color: rgba(21, 55, 68, 0.3);
        color:  #ffffff;
    }

</style>
